<template>
  <div>
    <NavigationBar title="收货地址" arrow="true"></NavigationBar>
    <div style="padding-top:150rpx;">
      <div class="address" v-for="(item,index) in address" :key="index">
        <van-row>
          <van-col span="6" style="text-align:left;">
            <span style="font-weight:bold;">{{item.name}}</span>
          </van-col>
          <van-col span="18" style="text-align:left;">
            <span style="padding-right:10px;">{{item.mobile}}</span>
            <van-tag v-if="item.default_address == 'Y'" plain type="danger">默认</van-tag>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="20" style="text-align:left;">
            <span style="font-size:14px;">{{item.address}}</span>
          </van-col>
          <van-col span="4" style="text-align:right;">  
            <van-icon name="edit" size="20px" @click="editAddress(item.id)" />
          </van-col>
        </van-row>
      </div>
      <div class="btn" @click="addAddress">新建地址</div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import { mapState, mapActions ,mapGetters } from 'vuex'
import NavigationBar from "@/components/navigationBar"
export default {
  components: {
    NavigationBar
  },
  data () {
    return {
      address:[]
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ]),
  },
  methods: {
    addAddress(){
      wx.navigateTo({url:'/pages/user/add_address'})
    },
    editAddress(id){
      wx.navigateTo({url:'/pages/user/add_address?id=' + id})
    }
  },
  async onShow () {
    let result = await api.findAddress({brand_id:this.user.brand_id,user_id:this.user.id})
    if (result.code == 0) {
      result.data.forEach(item=>{
        let address = ''
        item.area.forEach(ar=>{
          address = address + ar
        })
        address = address + item.detail_address
        item.address = address
      })
      this.address = result.data
    }
  }
}
</script>

<style scoped>
.address{
  font-size: 15px;
  border-bottom:1px solid #d9d9d9;
  padding: 15px;
  background: #fff;
}
.btn{
  height: 40px;
  line-height: 40px;
  width:95%;
  color: white;
  font-size: 15px;
  text-align: center;
  background: #feb3ba;
  border-radius: 5px;
  margin: 20px auto ;
}
</style>
